<template>
  <v-layout>
    <v-app-bar color="grey-lighten-2"
      >{{ $t("title") }}
      <template v-slot:append>
        <v-btn
          icon="mdi-dots-vertical"
          @click="$i18n.locale = $i18n.locale === 'zh-cn' ? 'en' : 'zh-cn'"
        ></v-btn> </template
    ></v-app-bar>
    <v-navigation-drawer color="grey-darken-2" permanent>
      <v-list>
        <v-list-item
          prepend-avatar="https://cdn.vuetifyjs.com/images/john.png"
          title="Cain"
          subtitle="3111345436@qq.com"
        >
          <template v-slot:append>
            <v-list-item-avatar end>
              <v-btn size="small" variant="text" icon="mdi-menu-down"></v-btn>
            </v-list-item-avatar>
          </template>
        </v-list-item>
      </v-list>
      <v-divider></v-divider>
      <v-list nav dense>
        <v-list-item
          v-for="(item, i) in useMenu.menulist"
          :key="i"
          :value="item"
          :to="item.to"
          active-color="primary"
        >
          <v-list-item-avatar>
            <v-icon :icon="item.icon"></v-icon>
          </v-list-item-avatar>

          <v-list-item-title
            style="margin-left: 10px"
            v-text="item.text"
          ></v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-main>
      <div style="padding: 12px">
        <nuxt-child />
      </div>
    </v-main>
  </v-layout>
</template>
<script lang="ts" setup>
import { useStore } from "../stores/index.ts";
// 国际化设置
import { useI18n } from "vue-i18n";
// 设置页面标题
useHead({ title: "标题" });
// 定义变量
const selectedItem = ref(1);
// 实例store
// const { locale } = useI18n();

const useMenu = useStore();
</script>
